<template>
  <el-form size="large" class="login-content-form">
    <el-form-item class="login-animation1">
      <el-input type="text" placeholder="请输入账号" v-model="ruleForm.userName" clearable autocomplete="off">
        <template #prefix>
          <el-icon class="el-input__icon">
            <ele-User />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item class="login-animation2">
      <el-input
        :type="isShowPassword ? 'text' : 'password'"
        placeholder="请输入密码"
        v-model="ruleForm.password"
        autocomplete="off"
      >
        <template #prefix>
          <el-icon class="el-input__icon">
            <ele-Unlock />
          </el-icon>
        </template>
        <template #suffix>
          <i
            class="el-input__icon login-content-password"
            v-if="ruleForm.password"
            @click="isShowPassword = !isShowPassword"
          >
            <ele-Hide v-if="isShowPassword"></ele-Hide>
            <ele-View v-if="!isShowPassword"></ele-View>
          </i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item class="login-animation3">
      <el-col :span="15">
        <el-input
          type="text"
          maxlength="4"
          placeholder="请输入验证码"
          v-model="ruleForm.code"
          clearable
          autocomplete="off"
        >
          <template #prefix>
            <el-icon class="el-input__icon">
              <ele-Position />
            </el-icon>
          </template>
        </el-input>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="8">
        <el-button class="login-content-code">1234</el-button>
      </el-col>
    </el-form-item>
    <el-form-item class="login-animation4">
      <el-button type="primary" class="login-content-submit" round :loading="loading" @click="onSignIn">
        <span>登 录</span>
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElNotification } from 'element-plus';
import { useUserStore } from '@/store/user';
const ruleForm = reactive({
  userName: 'admin',
  password: '123456',
  code: '1234'
});
const loading = ref(false);
const isShowPassword = ref(false);
const isError = ref(false);
const onMessageIn = (message: string) => {
  ElMessage.closeAll();
  ElMessage.error(message);
  loading.value = false;
  isError.value = true;
};

const user = useUserStore();
const router = useRouter();
const onSignIn = () => {
  loading.value = true;
  isError.value = false;
  const { userName, password, code } = ruleForm;
  if (!userName) onMessageIn('账号不能为空');
  if (userName.length < 4) onMessageIn('账号不小于4位');
  if (!password) onMessageIn('密码不能为空');
  if (password.length < 6) onMessageIn('密码不小于6位');
  if (!code) onMessageIn('验证码不能为空');
  if (userName !== 'admin') onMessageIn('输入的账号有误');
  if (password !== '123456') onMessageIn('输入的账号有误');
  if (isError.value) return;
  user.login();
  loading.value = false;
  router.push('/home');
  ElNotification({
    title: '登录提示',
    message: '登录成功',
    type: 'success'
  });
};
</script>

<style scoped lang="scss">
.login-content-form {
  margin-top: 20px;

  @for $i from 1 through 4 {
    .login-animation#{$i} {
      opacity: 0;
      animation-name: error-num;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
      animation-delay: calc($i/10) + s;
    }
  }

  .login-content-password {
    width: 14px;
    cursor: pointer;

    &:hover {
      color: #909399;
    }
  }

  .login-content-code {
    width: 100%;
    padding: 0;
    font-weight: bold;
    letter-spacing: 5px;
  }

  .login-content-submit {
    width: 100%;
    letter-spacing: 2px;
    font-weight: 400;
    margin-top: 15px;
  }
}
</style>
